<template>
  <div class="app-container">
    <el-button type="primary" @click="updateBtn">编辑公司简介</el-button>
    <div v-if="getdata" style="margin-top: 10px;">
      <el-descriptions border :column="1" :labelStyle="{width:'180px',textAlign: 'center',color:'#000',fontSize:'24px' }">
        <el-descriptions-item label="公司介绍">
          <div class="inputDeep" style="width: 100%;" >
          <el-input :readonly="true" type="textarea" autosize v-model="getdata.overviewText">
          </el-input>
        </div>
        </el-descriptions-item>
        <el-descriptions-item label="公司介绍图片">
          <div class="imagesBox">
          <div v-for="item in getdata.images" :key="item">
            <el-image style="width: 400px;margin-right: 5px;" :src="item" fit="fit"
              :preview-src-list="getdata.images">
            </el-image>
          </div>
        </div>
        </el-descriptions-item>
        <el-descriptions-item label="公司资质">
          <div class="imagesBox">
          <div v-for="item in getdata.certificates" :key="item">
            <el-image style="width: 300px;margin-right: 5px;" :src="item" fit="fit"
              :preview-src-list="getdata.certificates"></el-image>
          </div>
        </div>
        </el-descriptions-item>
        <el-descriptions-item label="董事长头像">
          <el-image style="width: 150px;margin-right: 5px;" :src="getdata.leaderPhoto" fit="fit"
            :preview-src-list="[getdata.leaderPhoto]"></el-image>
        </el-descriptions-item>
        <el-descriptions-item label="轮播图">
          <div class="imagesBox">
          <div v-for="item in getdata.banner" :key="item">
            <el-image style="width: 400px;margin-right: 5px;" :src="item" fit="fit"
              :preview-src-list="getdata.banner"></el-image>
          </div>
        </div>
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <!-- 修改公司简介 :preview-src-list="srcList"-->
    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
      <el-form ref="form" :rules="rules" :model="form" label-width="120px">
        <el-form-item label="公司文字介绍" prop="overviewText">
          <el-input type="textarea" v-model="form.overviewText" rows="10">
          </el-input>
        </el-form-item>
        <el-form-item label="公司介绍图片" prop="images">
          <el-upload :file-list="fileList" ref="myImage" :action="action" list-type="picture-card"
            :on-success="handleAvatarSuccess1" :on-remove="handleRemove">
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog>
            <img width="100%" :src="form.images" alt="">
          </el-dialog>
        </el-form-item>
        <el-form-item label="公司资质" prop="certificates">
          <el-upload :file-list="fileList2" ref="mycertificatesImage" :action="action" list-type="picture-card"
            :on-success="handleAvatarSuccess2" :on-remove="handleRemove2">
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog>
            <img width="100%" :src="form.certificates" alt="">
          </el-dialog>
        </el-form-item>
        <el-form-item label="董事长头像" prop="leaderPhoto">
          <el-upload class="avatar-uploader" :action="action" :show-file-list="false" :on-success="handleAvatarSuccess3"
            :before-upload="beforeAvatarUpload">
            <img v-if="form.leaderPhoto" :src="form.leaderPhoto" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="轮播图" prop="banner">
          <el-upload :file-list="bannerList" ref="bannerImage" :action="action" list-type="picture-card"
            :on-success="bannerSuccess" :on-remove="bannerRemove">
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog>
            <img width="100%" :src="form.banner" alt="">
          </el-dialog>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getListData, add, update } from "@/api/companyIntroductionSystem/companyIntroduction";
export default {
  data () {
    return {
      action: "https://wsd.mjunity.com/group_meal_api/wsd_company/upload",
      // 是否显示弹出层
      open: false,
      // 标题
      title: "",
      //存储数据
      getdata: null,
      // 表单
      form: {
        overviewText: "",
        leaderPhoto: '',
        images: [],
        certificates: [],
      },
      fileList: [],
      fileList2: [],
      bannerList: [],
      // 表单效验
      rules: {
        overviewText: [
          { required: true, message: "公司文字介绍不能为空", trigger: "blur" }
        ],
        images: [
          { required: true, message: "公司介绍图片不能为空", trigger: "blur" }
        ],
        certificates: [
          { required: true, message: "公司资质不能为空", trigger: "blur" }
        ],
        leaderPhoto: [
          { required: true, message: "董事长头像不能为空", trigger: "blur" }
        ]
      },
    }
  },
  created () {
    this.getList();
  },
  methods: {
    //获取数据
    getList () {
      getListData().then(res => {
        this.getdata = res.data

        // console.log("res", this.getdata.overviewText)
      })
    },
    //上传公司介绍图片成功
    handleAvatarSuccess1 (res, file, fileList) {
      this.fileList = fileList;
    },
    //上传公司资质图片成功
    handleAvatarSuccess2 (res, file, fileList) {
      this.fileList2 = fileList;
    },
    //上传董事长头像图片成功
    handleAvatarSuccess3 (res, file) {
      this.form.leaderPhoto = file.response.data
    },
    bannerSuccess (res, file, fileList) {
      this.bannerList = fileList;
    },
    //上传图片错误
    // handleAvatarError(err,file){
    //   this.$message.error('上传图片失败');
    // },
    //图片删除
    handleRemove (file, fileList) {
      const indexs = this.fileList.map((item, index) => index).filter(index => this.fileList[index].url === file.url);
      // console.log("删除",file, fileList);
      // console.log("删除indexs",indexs);
      for (let index of indexs) {
        this.fileList.splice(index, 1);
      }
      this.$message.error('删除成功');
    },
    handleRemove2 (file, fileList) {
      const indexs = this.fileList2.map((item, index) => index).filter(index => this.fileList2[index].url === file.url);
      // console.log("删除",file, fileList);
      // console.log("删除indexs",indexs);
      for (let index of indexs) {
        this.fileList2.splice(index, 1);
      }
      this.$message.error('删除成功');
    },
    bannerRemove (file, fileList) {
      const indexs = this.bannerList.map((item, index) => index).filter(index => this.bannerList[index].url === file.url);
      for (let index of indexs) {
        this.bannerList.splice(index, 1);
      }
      this.$message.error('删除成功');
    },
    //上传前判断是不是jpg、png和图片大小不能超过2mb
    beforeAvatarUpload (file) {
      const isJPG = file.type === 'image/jpeg' || 'image/png';
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG/png 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    //重置表单
    reset () {
      this.form = {
        leaderPhoto: '',
        images: [],
        certificates: [],
      }
      this.resetForm("form");
    },
    // 取消
    cancel () {
      this.open = false
      this.reset()
    },
    /**编辑按钮操作 */
    updateBtn () {
      this.fileList = []
      this.fileList2 = []
      this.bannerList = []
      this.reset();
      getListData().then(res => {
        this.form = res.data
        this.form.companyId = res.data.companyId
        if (res.data.images.length != 0) {
          res.data.images.forEach(val => {
            this.fileList.push({ 'url': val, 'response': { 'data': val } })
          })
        }
        if (res.data.certificates.length != 0) {
          res.data.certificates.forEach(val => {
            this.fileList2.push({ 'url': val, 'response': { 'data': val } })
          })
        }
        if (res.data.banner.length != 0) {
          res.data.banner.forEach(val => {
            this.bannerList.push({ 'url': val, 'response': { 'data': val } })
          })
        }
      });
      this.open = true;
      this.title = "编辑信息";
      // })
    },

    //提交
    submitForm () {
      this.form.images = this.fileList.map(item => item.response.data)
      this.form.certificates = this.fileList2.map(item => item.response.data)
      this.form.banner = this.bannerList.map(item => item.response.data)
      this.$refs["form"].validate(valid => {
        if (valid) {
          update(this.form).then(response => {
            this.$modal.msgSuccess("编辑成功");
            this.$refs.myImage.clearFiles();
            this.$refs.mycertificatesImage.clearFiles();
            this.$refs.bannerImage.clearFiles();
            this.open = false
            this.getList()
          })
        }
      })
    }
  }
}
</script>
<style scoped>
.avatar-uploader .el-upload {
  margin-right: 5px;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 146px;
  height: 146px;
  line-height: 146px;
  text-align: center;
}

.avatar {
  width: 146px;
  height: 146px;
  display: block;
}

.inputDeep>>>.el-textarea__inner {
  border: 0;
  resize: none;
  padding: 0;
  font-size: 20px;
  color: #000 !important;
  cursor: default;
}

.imagesBox {
  display: flex;
  flex-wrap: wrap;
}
</style>
